<template>
	<view class="statistics">
		<uni-nav-bar dark :fixed="true" :border="false" background-color="#FFFFFF" status-bar title="申请记录"
			left-icon="left" @clickLeft="toBack" color="#000" />
		<u-sticky offset-top="64">
			<u-subsection :list="list" :current="curNow" @change="sectionChange">
			</u-subsection>
		</u-sticky>
		<view class="statistics-body">
			<scroll-view :scroll-y="true" @scrolltolower="scrolltolower">
				<view class="apply-item" v-for="(item,index) in applyList" :key="index"
					v-if="item.applyType === 0" 
					@click="toPage('/pages_clockIn/statistics/applyDetails?id='+item.id)">
					<view style="height: 60rpx;line-height: 60rpx;display: flex;
						justify-content: space-between;">
						<view style="display: flex;align-items: center">
							<text style="font-size: 36rpx;margin-right: 20rpx;">
								请假
							</text>
							<u-tag text="待审批" type="warning" plain plainFill 
								size="mini" v-if="item.approvalStatus === 0">
							</u-tag>
							<u-tag text="已通过" type="success" plain plainFill
								size="mini" v-if="item.approvalStatus === 1">
							</u-tag>
							<u-tag text="未通过" type="error" plain plainFill
								size="mini" v-if="item.approvalStatus === 2">
							</u-tag>
						</view>
						<text>{{item.createDate}}</text>
					</view>
					<view>
						<view>
							<text>请假类型：</text>
							<text v-if="item.vacateType === 0">事假</text>
							<text v-if="item.vacateType === 1">病假</text>
							<text v-if="item.vacateType === 2">其他</text>
						</view>
						<view>
							<text>开始时间：{{item.startTime}}</text>
						</view>
						<view>
							<text>结束时间：{{item.stopTime}}</text>
						</view>
					</view>
				</view>
				<view class="apply-item" v-for="(item,index) in applyList" :key="index"
					v-if="item.applyType === 1" 
					@click="toPage('/pages_clockIn/statistics/applyDetails?id='+item.id)">
					<view style="height: 60rpx;line-height: 60rpx;display: flex;
						justify-content: space-between;">
						<view style="display: flex;align-items: center">
							<text style="font-size: 36rpx;margin-right: 20rpx;">
								补卡
							</text>
							<u-tag text="待审批" type="warning" plain plainFill 
								size="mini" v-if="item.approvalStatus === 0">
							</u-tag>
							<u-tag text="已通过" type="success" plain plainFill
								size="mini" v-if="item.approvalStatus === 1">
							</u-tag>
							<u-tag text="未通过" type="error" plain plainFill
								size="mini" v-if="item.approvalStatus === 2">
							</u-tag>
						</view>
						<text>{{item.clockingDate}}</text>
					</view>
					<view>
						<view>
							<text>补卡日期：{{item.clockingDate}}</text>
						</view>
						<view>
							<text>补卡班次：{{item.stringLot}}</text>
						</view>
					</view>
				</view>
				<view class="apply-item" v-for="(item,index) in applyList" :key="index"
					v-if="item.applyType === 2 || item.applyType === 3"
					@click="toPage('/pages_clockIn/statistics/applyDetails?id='+item.id)">
					<view style="height: 60rpx;line-height: 60rpx;display: flex;
						justify-content: space-between;">
						<view style="display: flex;align-items: center">
							<text style="font-size: 36rpx;margin-right: 20rpx;">
								{{item.applyType === 2 ? '外勤' : '出差'}}
							</text>
							<u-tag text="待审批" type="warning" plain plainFill 
								size="mini" v-if="item.approvalStatus === 0">
							</u-tag>
							<u-tag text="已通过" type="success" plain plainFill
								size="mini" v-if="item.approvalStatus === 1">
							</u-tag>
							<u-tag text="未通过" type="error" plain plainFill
								size="mini" v-if="item.approvalStatus === 2">
							</u-tag>
						</view>
						<text>{{item.createDate}}</text>
					</view>
					<view>
						<view style="width: 100%;overflow: hidden;">
							<text style="white-space: nowrap;text-overflow: ellipsis;">
								地点：{{item.location}}
							</text>
						</view>
						<view>
							<text>开始时间：{{item.startTime}}</text>
						</view>
						<view>
							<text>结束时间：{{item.stopTime}}</text>
						</view>
					</view>
				</view>
				<u-loadmore v-if="applyList.length === 0" status="nomore" 
					line nomore-text="没有记录" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import attendanceApi from '../../request/attendanceApi';
	export default {
		data(){
			return {
				userInfo: {},
				curNow: 0,
				list: ['请假','补卡','外勤','出差'],
				applyList: [],
				getData: true, // 默认获取数据
				form: {
					currentPage: 1,
					pageSize: 20,
					applyType: 0, // 申请类型为请假
				}
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("loginUser");
			this.getApplyList();
		},
		methods: {
			// 返回上个页面
			toBack() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，1表示返回上一页
					animationType: 'pop-out', // 页面关闭的动画效果
					animationDuration: 300, // 页面关闭的动画时间
				});
			},
			// 跳转页面
			toPage(url) {
				console.log("url====>",url)
				uni.navigateTo({
					url: url
				})
			},
			sectionChange(index) {
				this.curNow = index;
				this.getData = true;
				this.form.applyType = index;
				this.applyList = [];
				this.getApplyList();
			},
			// 获取数据
			getApplyList(){
				attendanceApi.getAttendanceApplyList(this.form).then(res =>{
					if (res.code === 200){
						if (res.data.applyVoList.length > 0){
							res.data.applyVoList.forEach(item =>{
								this.applyList.push(item);
							})
						}else {
							this.getData = false;
						}
					}
				})
			},
			scrolltolower(){
				// 滑动到底部
				if (this.getData){
					this.form.currentPage++;
					this.getApplyList();
				}
			}
		}
	}
</script>

<style>
	.statistics{
		min-height: 100vh;
		background-color: #eeeeef;
	}
	
	.statistics-body{

	}
	
	.apply-item{
		width: 90%;
		margin: auto;
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 6px;
	}
</style>